<script setup>

</script>

<template>
  <div>
    <h3>测试使用多选框</h3>
<!--  true-label表示选中的属性值是多少  -->
    <el-checkbox v-model="checked" true-label="北京" disabled>北京</el-checkbox>
    <el-checkbox v-model="checked" true-label="上海" border @change="printVal">上海</el-checkbox>
    <el-checkbox v-model="checked" true-label="深圳" @change="printVal">深圳</el-checkbox>
    <h3>复选框组的使用</h3>

    <el-checkbox-group v-model="checkList">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>

    <h3>复选框组属性的使用</h3>
    <el-checkbox-group v-model="checkList" :min="2" @change="printOptions">
      <el-checkbox label="复选框 A"></el-checkbox>
      <el-checkbox label="复选框 B"></el-checkbox>
      <el-checkbox label="复选框 C"></el-checkbox>
      <el-checkbox label="禁用" disabled></el-checkbox>
      <el-checkbox label="选中且禁用" disabled></el-checkbox>
    </el-checkbox-group>

  </div>
</template>
<script>
export default {
  data() {
    return {
      checked: "北京",
      checkList: ['选中且禁用','复选框 A']
    };
  },
  methods:{
    printVal() {
      console.log("选中的城市为：" + this.checked);
    },
    printOptions(){
      console.log(this.checkList);
    }
  }

};
</script>
<style scoped>

</style>
